<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
   <title>销售当天拜访的经销商轨迹</title>  
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/datagrid-detailview.js"></script>
<script type="text/javascript" src="../../js/datagrid-cellediting.js"></script>
<script type="text/javascript" src="../../js/jquery-form.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/comm_check.js"></script>
<script type="text/javascript" src="../../js/relax_function.js"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> 
  <!--css-->  
    <style type="text/css">  
        body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; }  
        .demo_main { padding: 20px; padding-top: 10px; }  
       /*  .demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; border: solid 1px gray; }  */ 
        .demo_content { padding: 10px; margin-bottom: 10px; border: solid 1px gray; }  
       fieldset { border: 1px solid gray; }  
    </style>  
    <!--javascript--> 
</head>  
<body>  
    <div class="demo_main">  
        <!-- <fieldset class="demo_title">  
            销售当天拜访的经销商轨迹
       </fieldset>  --> 
       <fieldset class="demo_content">  
            <div style="min-height: 800px; width:800px;" id="map">  
            </div>  
            <script type="text/javascript">  
            var str=window.location.search;
            
            var strArray = str.split("=");
            var visitDate = strArray[2];
            var salerId = strArray[1].split("&")[0];
            //经纬度数组
            var markerArr='';
          
            //获取销售所拜访的经销商经纬度
            var service = $.svc.getSVC("/visit/findDealerInfoBySalerId");
   	        service
   	        .setParam("visit/salerId", salerId)
   	        .setParam("visit/visitDate", visitDate);
   	        service.call(
                  function (data, status) {
               	   if (data.succ == true) {
               		   markerArr = data.result;
                      } else {
                         alert('没有获取到经销商所对应的经纬度');
                      }
                  });  
                var map; //Map实例  
                function map_init() {  
                   map = new BMap.Map("map");  
                    //第1步：设置地图中心点
                    var point = new BMap.Point(markerArr[0].longitude,markerArr[0].latitude);  
                   //第2步：初始化地图,设置中心点坐标和地图级别。  
                    map.centerAndZoom(point, 15);  
                    //第3步：启用滚轮放大缩小  
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小
                    map.enableKeyboard();//启动键盘操作地图
                    //第4步：向地图中添加缩放控件  
                    var ctrlNav = new window.BMap.NavigationControl({  
                        anchor: BMAP_ANCHOR_TOP_LEFT,  
                        type: BMAP_NAVIGATION_CONTROL_LARGE,
                        enableGeolocation: true
                   });  
                    map.addControl(ctrlNav);
                    map.enableInertialDragging(true);　
                    //第5步：向地图中添加缩略图控件  
                    var ctrlOve = new window.BMap.OverviewMapControl({  
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
                        isOpen: 1  
                    });  
                    map.addControl(ctrlOve);  
  
                   //第6步：向地图中添加比例尺控件  
                    var ctrlSca = new window.BMap.ScaleControl({  
                      anchor: BMAP_ANCHOR_BOTTOM_LEFT  
                    });  
                   map.addControl(ctrlSca);  
  
                    //第7步：绘制点    
                    for (var i = 0; i < markerArr.length; i++) {  
                       var p0 = markerArr[i].point.split(",")[0];  
                       var p1 = markerArr[i].point.split(",")[1];  
                        var maker = addMarker(new window.BMap.Point(p0, p1), i);  
                       addInfoWindow(maker, markerArr[i], i);   
                  }  
                }  
  
                // 添加标注  
                function addMarker(point, index) {  
                   var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",  
                        new BMap.Size(23, 25), {  
                          offset: new BMap.Size(10, 25),  
                            imageOffset: new BMap.Size(0, 0 - index * 25)  
                       });  
                    var marker = new BMap.Marker(point, { icon: myIcon }); 
                    map.addOverlay(marker);  
                    return marker;  
               }  
 
               // 添加信息窗口  
               function addInfoWindow(marker, poi) {  
                   //pop弹窗标题  
                   var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.dealerAddress + '</div>';  
                    //pop弹窗信息  
                    var html = [];  
                    html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');  
                    html.push('<tr>');  
                    html.push('<td style="vertical-align:top;line-height:16px;width:50px;white-space:nowrap;word-break:keep-all">地址:</td>');  
                    html.push('<td style="vertical-align:top;line-height:16px">' + poi.dealerAddress + ' </td>');  
                    html.push('</tr>');  
                    html.push('<tr>');  
                    html.push('<td style="vertical-align:top;line-height:16px;width:50px;white-space:nowrap;word-break:keep-all">电话:</td>');  
                    html.push('<td style="vertical-align:top;line-height:16px">' + poi.dealerTel + ' </td>');  
                    html.push('</tr>');  
                    html.push('<tr>');  
                    html.push('<td style="vertical-align:top;line-height:16px;width:50px;white-space:nowrap;word-break:keep-all">拜访时间:</td>');  
                    html.push('<td style="vertical-align:top;line-height:16px">' + poi.visitDate + ' </td>');  
                    html.push('</tr>'); 
                   html.push('</tbody></table>');  
                   var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });  
  
                  var openInfoWinFun = function () {  
                       marker.openInfoWindow(infoWindow);  
                    };  
                   marker.addEventListener("click", openInfoWinFun);  
                   return openInfoWinFun;  
               }  
  
             //异步调用百度js
               function map_load() {
                   var load = document.createElement("script");
                   load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
                   document.body.appendChild(load);
               }
                $(function(){
                	var setTime;
                	clearTimeout(setTime);
                	setTime = setTimeout(function(){
                		map_load();
                	},100);
                	
                });
            </script> 
       </fieldset>  
    </div>  
</body>  
</html>  
